<template>
    <div>
        <div>toRef和toRefs版本</div>
        <input type="text" v-model="mytext">
        <button @click="handleAdd">添加</button>
        <ul>
            <li v-for="(data, index) in datalist" :key="data">
                {{ data }}
                <button @click="handleDel(index)">删除</button>
            </li>
        </ul>
        <div v-if="datalist.length === 0">暂无内容</div>
    </div>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue';


export default {
    setup() {
        //变量区
        const state = reactive({
            mytext: "",
            datalist: ["aaa", "bbb", "ccc"]
        })

        //方法区
        const handleAdd = () => {
            state.datalist.push(state.mytext)
            state.mytext = ""
        }

        const handleDel = (index) => {
            state.datalist.splice(index, 1)
        }

        return {
            // mytext: toRef(state, "mytext"),
            // datalist: toRef(state, "datalist"),
            ...toRefs(state),
            handleAdd,
            handleDel
        }
    },
}
</script>